<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="/favicon.ico">
  <title>vfadmin管理系统</title>
  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }



    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background: linear-gradient(135deg, #36b543 0%, #9b4cea 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.6s ease-in-out;
    }

    .modern-loader::after {
      content: '';
      position: absolute;
      width: 85%;
      height: 85%;
      border-radius: 50%;
      background: linear-gradient(135deg, #36b543 0%, #9b4cea 100%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    /* 现代化的加载器 */
    .modern-loader {
      position: relative;
      width: 120px;
      height: 120px;
    }

    .modern-loader::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(45deg, transparent, transparent 40%, #fff);
      animation: modern-spin 1.5s linear infinite;
    }

    /* 内部闪烁点 */
    .loader-dots {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 8px;
    }

    .loader-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #fff;
      animation: pulse-dots 1.8s ease-in-out infinite;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }

    .loader-dot:nth-child(1) { animation-delay: 0s; }
    .loader-dot:nth-child(2) { animation-delay: 0.3s; }
    .loader-dot:nth-child(3) { animation-delay: 0.6s; }

    /* 背景装饰圆圈 */
    .bg-circles {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .bg-circle {
      position: absolute;
      border: 2px solid rgb(202, 195, 195);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    .bg-circle:nth-child(1) {
      width: 60px;
      height: 60px;
      top: 20%;
      left: 20%;
      animation-delay: 0s;
    }

    .bg-circle:nth-child(2) {
      width: 40px;
      height: 40px;
      top: 60%;
      right: 25%;
      animation-delay: 2s;
    }

    .bg-circle:nth-child(3) {
      width: 80px;
      height: 80px;
      bottom: 20%;
      left: 15%;
      animation-delay: 4s;
    }

    .bg-circle:nth-child(4) {
      width: 35px;
      height: 35px;
      top: 15%;
      right: 15%;
      animation-delay: 1s;
    }

    .bg-circle:nth-child(5) {
      width: 55px;
      height: 55px;
      bottom: 15%;
      right: 20%;
      animation-delay: 3s;
    }

    /* 加载文字 */
    .load_title {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      color: #fff;
      font-size: 24px;
      font-weight: 300;
      text-align: center;
      margin-top: 40px;
      opacity: 0.9;
      letter-spacing: 2px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      animation: text-glow 2s ease-in-out infinite alternate;
    }

    .load_subtitle {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      font-weight: 300;
      text-align: center;
      margin-top: 10px;
      letter-spacing: 1px;
    }

    /* 进度条 */
    .progress-container {
      width: 200px;
      height: 4px;
      background: rgba(201, 194, 194, 0.5);
      border-radius: 2px;
      margin-top: 30px;
      overflow: hidden;
    }

    .progress-bar {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.8));
      border-radius: 2px;
      animation: progress-fill 3s ease-in-out infinite;
    }

    /* 动画定义 */
    @keyframes modern-spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-dots {
      0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
      }
      40% {
        transform: scale(1.2);
        opacity: 1;
      }
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.4;
      }
      50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
      }
    }

    @keyframes text-glow {
      0% {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      }
      100% {
        text-shadow: 0 2px 20px rgba(255, 255, 255, 0.3);
      }
    }

    @keyframes progress-fill {
      0% {
        width: 0%;
        transform: translateX(-100%);
      }
      50% {
        width: 100%;
        transform: translateX(0%);
      }
      100% {
        width: 100%;
        transform: translateX(100%);
      }
    }

    /* 加载完成后的动画 */
    .loaded #loader-wrapper {
      opacity: 0;
      visibility: hidden;
      transform: scale(0.8);
    }


    /* 响应式设计 */
    @media (max-width: 768px) {
      .modern-loader {
        width: 80px;
        height: 80px;
      }
      
      .load_title {
        font-size: 20px;
      }
      
      .bg-circle {
        display: none;
      }
      
      .progress-container {
        width: 150px;
      }
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="loader-wrapper">
      <!-- 背景装饰圆圈 -->
      <div class="bg-circles">
        <div class="bg-circle"></div>
        <div class="bg-circle"></div>
        <div class="bg-circle"></div>
        <div class="bg-circle"></div>
        <div class="bg-circle"></div>
      </div>
      
      <!-- 现代化加载器 -->
      <div class="modern-loader">
        <div class="loader-dots">
          <div class="loader-dot"></div>
          <div class="loader-dot"></div>
          <div class="loader-dot"></div>
        </div>
      </div>
      
      <!-- 加载文字 -->
      <div class="load_title">正在初始化系统</div>
      <div class="load_subtitle">请稍候片刻...</div>
      
      <!-- 进度条 -->
      <div class="progress-container">
        <div class="progress-bar"></div>
      </div>
    </div>
  </div>
  
  <script type="module" src="/src/main.js"></script>
  
  <script>
    // 加载动画控制已移至main.js
  </script>
</body>

</html>